<template>
  <div class="contents">
    <el-form
      class="demo-form-inline"
      :inline="true"
      label-position="right"
      label-width="80px"
      :model="dataFilter"
      ref="ruleForm"
    >
      <el-form-item label="支付日期:" prop="timeList">
        <el-date-picker
          v-model="dataFilter.timeList"
          class="writeWidth"
          end-placeholder="结束日期"
          range-separator="-"
          start-placeholder="开始日期"
          type="daterange"
        />
      </el-form-item>
      <el-form-item label="搜索:" prop="ballanceNo">
        <el-input
          v-model="dataFilter.ballanceNo"
          class="writeWidth"
          placeholder="第三方交易流水/客户名称/关联单号"
        />
      </el-form-item>
      <el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
        <el-button type="primary" @click="checkPagging()">查询</el-button>
        <el-button>导出</el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 85px" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-form-item>
      <!-- <br /> -->
      <div v-show="!openCol">
        <el-form-item label="单据类型:">
          <el-select v-model="value" class="writeWidth" placeholder="请选择">
            <el-option
              v-for="item in opt1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="支付渠道:" prop="channel">
          <el-select
            v-model="dataFilter.channel"
            class="writeWidth"
            placeholder="请选择"
          >
            <el-option
              v-for="item in optOfPay"
              :key="item.id"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <br />
        <el-form-item style="margin-left: 80px">
          <el-button type="primary" @click="checkPagging()">查询</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button>导出</el-button>
        </el-form-item>
      </div>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column fixed label="支付时间" prop="paymentTime" width="150" />
      <el-table-column label="第三方交易流水" prop="orderNo" width="120" />
      <el-table-column label="客户名称" prop="customerInfo.name" width="120" />
      <el-table-column label="关联单号" prop="ballanceNo" width="120" />
      <el-table-column label="单据类型" prop="type" />
      <el-table-column label="支付渠道" prop="channel" width="120" />
      <el-table-column label="金额" prop="total" />
    </el-table>
    <div class="bottom-desc">
      <div style="margin-top: 20px">
        <span style="padding: 0 6px">合计金额:</span>
        <span style="padding: 0 6px">所有页:￥0.00</span>
        <span style="padding: 0 6px">本页:￥0.00</span>
      </div>
      <el-pagination
        background
        layout="total, prev, pager, next,sizes, jumper"
        :page-sizes="[10, 20, 30, 40, 50]"
        style="text-align: middel"
        :total="total"
        :page-size="dataFilter.pageSize"
        :current-page="dataFilter.current"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getList, selectChannel } from '@/api/Finance/paymentFlow'

export default {
  data() {
    return {
      openCol: true,
      formInline: {
        user: '',
        region: '',
      },
      dataFilter: {
        ballanceNo: '',
        channel: '',
        timeList: [],
        current: 1,
        pageSize: 10,
      },
      total: 0,
      selectFilter: {
        dict_code: 'channel',
      },
      value: [],
      opt1: [],
      optOfPay: [],
      tableData: [],
    }
  },
  created() {
    this.paggingQuery()
    this.selectChannelList()
  },
  methods: {
    async checkPagging() {
      await this.paggingQuery()
    },
    async paggingQuery() {
      const res = await getList(this.dataFilter)
      console.log(res, '1820')
      this.tableData = res.list
      this.total = res.size
    },
    async selectChannelList() {
      const res = await selectChannel(this.selectFilter)
      console.log(res, '1212121')
      this.optOfPay = res.data.records
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    clickOpen() {
      this.openCol = !this.openCol
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.dataFilter.pageSize = val
      this.paggingQuery()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.dataFilter.current = val
      this.paggingQuery()
    },
  },
}
</script>

<style lang="scss" scoped>
.contents {
  padding: 10px 20px;

  .writeWidth {
    width: 233px;
  }

  .bottom-desc {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>
